<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header_css :: header('Carpo设计')"></head>
<link th:href="@{/GooFlow1.1/codebase/GooFlow.css}" rel="stylesheet"/>
<body>
<div id="dpLTE" class="container-fluid" v-cloak>
	<div id="demo" style="margin:5px;float:left"></div>
	<form class="myForm" id="propertyForm">
		<div class="form_title">属性设置</div>
		<div class="form_content">
			<table>
				<tr><td class="th">Id：</td><td><input type="text" style="width:120px" id="ele_id"/></td></tr>
				<tr><td class="th">Name：</td><td><input type="text" style="width:120px" id="ele_name"/></td></tr>
				<tr><td class="th">Type：</td><td><input type="text" style="width:120px" id="ele_type"/></td></tr>
				<tr><td class="th">Model：</td><td><input type="text" style="width:120px" id="ele_model"/></td></tr>
				<tr><td class="th">Left-r：</td><td><input type="text" style="width:120px" id="ele_left"/></td></tr>
				<tr><td class="th">Top-r：</td><td><input type="text" style="width:120px" id="ele_top"/></td></tr>
				<tr><td class="th">Width：</td><td><input type="text" style="width:120px" id="ele_width"/></td></tr>
				<tr><td class="th">Height：</td><td><input type="text" style="width:120px" id="ele_height"/></td></tr>
				<tr><td class="th">From：</td><td><input type="text" style="width:120px" id="ele_from"/></td></tr>
				<tr><td class="th">To：</td><td><input type="text" style="width:120px" id="ele_to"/></td></tr>
			</table>
		</div>
		<div class="form_btn_div">
			<input type="reset" value="重置"/>
			<input type="button" value="确定" onclick="alert(demo.$focus)"/>
		</div>
	</form>
	<div style="clear:both">
		<input id="submit" type="button" value='导出结果' onclick="Export()"/>
		<textarea id="result" row="6"></textarea>
	</div>
</div>
<div th:include="include/footer_js :: footer"></div>
<script th:src="@{/js/carpo/design/list.js}"></script>
<script th:src="@{/GooFlow1.1/demo/child.js}"></script>
<script th:src="@{/GooFlow1.1/plugin/jquery.min.js}"></script>
<script th:src="@{/GooFlow1.1/codebase/GooFunc.js}"></script>
<script th:src="@{/GooFlow1.1/plugin/json2.js}"></script>
<script th:src="@{/GooFlow1.1/codebase/GooFlow.js}"></script>
<script th:src="@{/GooFlow1.1/codebase/GooFlow.color.js}"></script>
</body>
<script type="text/javascript">
	var property={
		width:1072,
		height:600,
		toolBtns:["fa-sign-in","fa-sign-out","fa-scissors","fa-filter","fa-level-down","fa-cubes","fa-columns","fa-copy","fa-percent"],
		haveHead:true,
		headLabel:true,
		headBtns:["fa-file","fa-floppy-o","fa-reply","fa-share","fa-refresh"],//如果haveHead=true，则定义HEAD区的按钮
		haveTool:true,
		haveGroup:false,
		useOperStack:true
	};
	var remark={
		cursor:"选择指针",
		direct:"结点连线",
		"fa-sign-in":"输入文件",
		"fa-sign-out":"输出文件",
		"fa-scissors":"列过滤",
		"fa-filter":"行过滤",
		"fa-level-down":"去重",
		"fa-cubes":"Union",
		"fa-columns":"Map映射",
		"fa-copy":"Join关联",
		"fa-percent":"分组计算"
	};
	var demo;
	$(document).ready(function(){
		demo=$.createGooFlow($("#demo"),property);
		demo.setNodeRemarks(remark);
		demo.onItemDel=function(id,type){
			if(confirm("确定要删除该单元吗?")){
				this.blurItem();
				return true;
			}else{
				return false;
			}
		}
		demo.loadData(jsondata);
		demo.onItemFocus=function(id,model){
			var obj;
			$("#ele_model").val(model);
			$("#ele_id").val(id);
			if(model=="line"){
				obj=this.$lineData[id];
				$("#ele_type").val(obj.M);
				$("#ele_left").val("");
				$("#ele_top").val("");
				$("#ele_width").val("");
				$("#ele_height").val("");
				$("#ele_from").val(obj.from);
				$("#ele_to").val(obj.to);
			}else if(model=="node"){
				obj=this.$nodeData[id];
				$("#ele_type").val(obj.type);
				$("#ele_left").val(obj.left);
				$("#ele_top").val(obj.top);
				$("#ele_width").val(obj.width);
				$("#ele_height").val(obj.height);
				$("#ele_from").val("");
				$("#ele_to").val("");
			}
			$("#ele_name").val(obj.name);
			return true;
		};
		demo.onItemBlur=function(id,model){
			document.getElementById("propertyForm").reset();
			return true;
		};
	});
	var out;
	function Export(){
		document.getElementById("result").value=JSON.stringify(demo.exportData());
	}
</script>
</html>